<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DW商城首页</title>
    <link rel="stylesheet" href="../css/index.css" />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_3210907_2mmykitg62h.css"
    />
    <script src="../js/axios.min.js"></script>
    
    <script src="../js/jquery1.42.min.js"></script>
    <script src="../js/jquery.SuperSlide.2.1.3.js"></script>
  </head>
  <body>
    <div class="head">
      <header>
        <div class="head1">
          <a href=""
            ><span class="iconfont icon-chazhaodingwei" id="s1"
              >查找门店</span
            ></a
          >
          <a href=""
            ><span class="iconfont icon-lianxiwomen" id="s2">联系我们</span></a
          >
        </div>
        <h3>D A N I E L W E L L I N G T O N</h3>
        <div class="head2">
          <button id="clickLogin">
            <span class="iconfont icon-yonghu">DW会员俱乐部</span>
          </button>
          <div class="head21">
            <p>已经是DW的会员？</p>
            <button onclick="window.location.href='login.html'">登录</button>
            <p>注册会员享受更多权益</p>
            <button onclick="window.location.href='register.html'">注册</button>
          </div>
        </div>
      </header>
    </div>
    <div class="navList">
      <ul>
        <li class="navList1">
          全新上市
          <div class="navList11">
            <ul>
              <li>复古方形腕表系列</li>
              <li>珠光贝母腕表系列</li>
              <li>DW-SWITCH系列</li>
              <li>墨镜</li>
            </ul>
          </div>
        </li>
        <li class="navList2">智能手表装饰壳</li>
        <li class="navList3">
          腕表
          <div class="navList33">
            <ul>
              <li>所有腕表</li>
              <li>男士腕表</li>
              <li>女士腕表</li>
              <li>QUADRO系列</li>
              <li>PETITE系列</li>
              <li>CLASSIC系列</li>
              <li>ICONIC系列</li>
              <li>金色手表</li>
              <li>银色手表</li>
              <li>玫瑰金色手表</li>
            </ul>
          </div>
        </li>
        <li class="navList4">
          配饰
          <div class="navList44">
            <ul>
              <li>所有配饰</li>
              <li>戒指</li>
              <li>手镯/手链</li>
              <li>耳饰</li>
              <li>项链</li>
              <li>墨镜</li>
            </ul>
          </div>
        </li>
        <li class="navList5">
          系列
          <div class="navList55">
            <ul>
              <li>所有系列</li>
              <li>QUADRO系列</li>
              <li>PETITE系列</li>
              <li>CLASSIC系列</li>
              <li>ICONIC系列</li>
              <li>ELAN系列</li>
              <li>QUADRO系列</li>
              <li>PETITE系列</li>
              <li>CLASSIC系列</li>
              <li>ICONIC系列</li>
              <li>ELAN系列</li>
            </ul>
          </div>
        </li>
        <li class="navList6">
          礼盒套装
          <div class="navList66">
            <ul>
              <li>礼盒套装</li>
              <li>与她宠爱</li>
              <li>赠他惊喜</li>
            </ul>
          </div>
        </li>
        <li class="navList7">
          表带
          <div class="navList77">
            <ul>
              <li>所有表带</li>
              <li>PETITE表带</li>
              <li>CLASSIC表带</li>
              <li>CLASSIC表带</li>
            </ul>
          </div>
        </li>
        <li class="navList8">
          穿搭灵感
          <div class="navList88">
            <ul>
              <li>女士精选</li>
              <li>男士精选</li>
              <li>明星风尚</li>
            </ul>
          </div>
        </li>
        <li class="navList9">
          探索DW
          <div class="navList99">
            <ul>
              <li>品牌故事</li>
              <li>联系我们</li>
              <li>常见问题</li>
            </ul>
          </div>
        </li>
      </ul>
      <a href="shopCar.html"><span class="iconfont icon-gouwuche1"></span></a>
    </div>
    <div id="slideBox" class="slideBox">
			<div class="hd">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
				
      </div>
			<div class="bd">
				<ul>
					<li><img src="../img/span1.PNG" /></li>
					<li><img src="../img/span2.PNG" /></li>
					<li><img src="../img/span3.PNG" /></li>
				</ul>
			</div>

			<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
			<a class="prev" href="javascript:void(0)"></a>
			<a class="next" href="javascript:void(0)"></a>
		</div>
    <div class="huodong">
      <div class="css-yumxn7 h5">全场满减1700减170/2100减250</div>
      <br>
      <div class="css-yumxn7 h5">活动时间：4月22日-4月24日</div>
      <br>
      <div class="css-yumxn7 h5">*套装已享满减划线价，可直接购买</div>
      <br>
    </div>
    <div class="fenlei">
      <div class="fenlei1"><a href="">所有腕表</a></div>
      <div class="fenlei2"><a href="">所有饰品</a></div>
      <div class="fenlei3"><a href="">复古方形腕表系列</a></div>
      <div class="fenlei4"><a href="">珠光贝母腕表系列</a></div>
    </div>
    <div class="shop">
      <h1>人  气  推  荐</h1>
      <ul id="list"></ul>
    </div>
    <div class="list">
      <div class="list1">立即购买</div>
    </div>
    <div class="listNext">
      <div class="listNext1">
        <div class="listNext11">立即购买</div>
      </div>
      <div class="listNext2">
        <div class="listNext22">立即购买</div>
      </div>
    </div>
    <div class="listLast">
      <div class="list1">立即购买</div>
    </div>
    <div class="listAll">
      <div class="listAll1">
        <p>为您推荐</p>
        <ul>
          <li>星辰腕表系列
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            珠光贝母腕表系列
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            女士腕表
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            男士腕表
            <span class="iconfont icon-jiantou"></span>
          </li>
          <li>
            礼品套装
            <span class="iconfont icon-jiantou"></span>
          </li>
        </ul>

      </div>

    </div>
    <div class="returnTop">
      <button class="iconfont icon-shangjiantou" style="border:0px;background-color: white" onclick="returnTop()"></button>
    </div>
    <div class="foot">
      <div class="iconfont icon-zhuanjiazixun" id="zixun">点击咨询</div>
      <ul>
        <li>使用条款</li>
        <li>隐私保护政策</li>
        <li>防伪声明</li>
        <li>网站地图</li>
      </ul>
      <div class="foot1">
        <ul>
          <li>粤公网安备44030502000796 </li>
          <li>粤ICP备15098750 </li>
          <li>营业执照</li>
        </ul>
      </div>
      <p>ALL RIGHTS RESERVED. COPYRIGHT  © 丹尼尔惠灵顿贸易（深圳）有限公司</p>
    </div>
    <script>
      function returnTop(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
		jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
      let shopArr = [];
      let uid = localStorage.getItem("id");
      function shopList() {
        let shopListAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        let pagesize = 20;
        let pagenum = 0;
        axios
          .get(shopListAPI, {
            params: {
              pagesize,
              pagenum,
              uid,
            },
          })
          .then(function (res) {
            console.log(res.data.data);
            //把得到的数据保存起来给全局变量这个数组
            shopArr = res.data.data;
            //因为商品详情是根据每个商品的id拿到的，所有我们要根据他的pid来给每个商品详情定位
            let liArr = res.data.data.map(
              (v) =>
                `
                <li>
                  <a href="item.html?pid=${v.pid}">
                      <div id="everyShop">
                      <img src="${v.pimg}" alt="加载不出来了">
                      <h5>${v.pname}</h5>
                      <p>${v.pdesc}</p>
                      <p>￥${v.pprice}</p>
                      </div>
                    </a>
                    </li>

                    `
            );
            document.querySelector("#list").innerHTML = liArr.join(" ");
          });
      }
      shopList();
      // let pagenum = 0;
      // let pagesize = 8;
      // function nextShopList() {
      //   pagenum++;
      //   console.log(pagenum);
      //   document.querySelector(".num").innerHTML = pagenum + 1;
      //   //下页数据不够20条，所以没有显示
      //   shopList();
      // }
      // function prevShopList() {
      //   if (pagenum == 1) {
      //     return pagenum;//return 一个返回值，还有一个功能，只写return的话，就是终止函数了，不往下执行了
      //   }
      //   pagenum--;
      //   document.querySelector(".num").innerHTML = pagenum;
      //   //下页数据不够20条，所以没有显示
      //   shopList();
      // }
    </script>
  </body>
</html>
